<template>
  <div class="tw-w-full tw-h-screen"
       style="
       background-image: url('http://101.43.58.240:9000/picbed/1.png');
       background-size: cover;
       background-size: contain" >
    <!-- login form-->
    <div style="
      background-image: url('http://101.43.58.240:9000/picbed/login.png');
      min-width: 1000px;
      width: 60%;"
         class=" tw-relative  tw-h-2/3 tw-m-auto tw-rounded-2xl"
    >
          <q-form
            @submit="onSubmit"
            @reset="onReset"
            class=" q-gutter-md tw-m-auto tw-absolute tw-w-1/3 tw-right-5 tw-bottom-40 "
          >
            <div class="text-h5 text-center tw-font-bold">选题系统登录</div>
            <q-input
              outlined
              v-model="name"
              label="请输入用户名"
              hint="用户名"
              lazy-rules
              :rules="[ val => val && val.length > 0 || '请输入用户名']"
            >
              <template v-slot:prepend>
                <q-icon name="person" class="tw-text-2xl"/>
              </template>
            </q-input>
            <q-input
              outlined
              type="password"
              v-model="password"
              label="请输入密码"
              lazy-rules
              :rules="[
          val => val !== null && val !== '' || '请输入密码',
        ]"
            >
              <template v-slot:prepend>
                <q-icon name="lock" class="tw-text-2xl"/>
              </template>
            </q-input>
            <!--      <q-toggle v-model="accept" label="I accept the license and terms" />-->
            <div class="row justify-between">
              <q-btn label="确认" type="submit" color="primary"/>
              <q-btn label="重置" type="reset" color="primary" flat class="q-ml-sm"/>
            </div>
          </q-form>
    </div>

  </div>
</template>

<script>
import {useQuasar} from 'quasar'
import {ref} from 'vue'
import {api} from "boot/axios";
import {useRouter} from "vue-router";

export default {
  setup() {
    const $q = useQuasar()

    const name = ref(null)
    const password = ref(null)
    const accept = ref(false)

    const router = useRouter();
    return {
      name,
      password,

      onSubmit() {
        let formData = new FormData();
        formData.append('username', name.value.toString());
        formData.append('password', password.value.toString());
        api({url: '/job/user/login', method: 'post', data: formData}).then(res => {
          let {code, data, message} = res.data
          if (code === 200) {
            $q.notify({
              color: 'green-4',
              textColor: 'white',
              icon: 'cloud_done',
              message: '登录成功',
              position: 'top'
            })
            localStorage.setItem('info',JSON.stringify(data))
            if (data.role === 'teacher') {
              router.push('/t')
            } else if (data.role === 'stu') {
              router.push('/sys')
            } else {
              router.push('/a')
            }

          } else {
            $q.notify({
              color: 'red-4',
              textColor: 'white',
              icon: 'cloud_done',
              message: '登录失败',
              position: 'top'
            })
          }
        })

      },
      onReset() {
        name.value = null
        password.value = null
        accept.value = false
      }
    }
  }
}
</script>
